<template>
  <div>
    <van-nav-bar
      title="搜索列表"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
      fixed
      placeholder
    />
    <div class="list">
      <!-- 下拉刷新 -->
      <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
      <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
      <!-- <van-list
          v-model="loading"
          :finished="finished"
          finished-text="我也是有底线的，请不要挑战我的底线"
          @load="getList"
        >
          <li v-for="item in list" :key="item._id" >
            <p>{{ item.title }}</p>
          </li>
        </van-list> 
        </van-pull-refresh> -->
      <!-- 封装搜索列表 -->
      <componentList :API="searchApi" :params="{ key_word }" :refresh="true">
        <template #default="{ list }">
          <li
            v-for="item in list"
            :key="item._id"
            @click="
              $router.push({
                path: '/article',
                query: {id:item._id,title:item.title },
              })
            "
          >
            <p>{{ item.title }}</p>
          </li>
        </template>
      </componentList>
    </div>
  </div>
</template>

<script>
import { searchApi } from "@/api/api";

import componentList from "@/components/componentList.vue";
export default {
  name: "searchList",
  components: {
    componentList: componentList,
  },

  data() {
    return {
      // list: [],
      // loading: false, //是否正在加载
      // finished: false, //是否全部加载完毕
      // skip: 0, //从skip开始拿
      // limit: 20, //一次拿多少条
      // refreshing: false, //是否刷新中
      searchApi,
    };
  },

  computed: {
    key_word() {
      return this.$route.query.key_word;
    },
  },

  created() {
    // this.getList();
  },

  methods: {

    //下拉刷新
    onRefresh() {
      // console.log("刷新了");
      // this.skip = 0;
      // this.finished = false; //如果不更改会出现bug
      // //通过参数 判断list是否是加载动作
      // this.getList(true); //结束刷新
    },
  },
};
</script>

<style lang="less">
* {
  list-style: none;
}
// 下拉刷新
.doge {
  width: 140px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
}
.list li {
  min-height: 50px;
}
</style>